  <!-- 更多评论 -->
<script>
import { useRouter } from "vue-router";
import { ref, reactive, toRefs } from "@vue/reactivity";
import { getmorecom } from "../api/morecom";
import { onMounted } from "@vue/runtime-core";
import { getdetails } from "../api/details";
import { Toast } from "vant";

export default {
  setup() {
    let list = reactive({
      emid: 0,
      index: 1, //评论游标
      lists: null, //初始化数据
      reviewList: null, //评论评论头部
      wholeNum: 0, //全部评论数
      Allcommens: "",
      groupId: 0,
      Id: "",
      Allcommenslist: [], //总评论
      gettime:'',//当前时间
      flag:false,
      btnFlag:false,
      scrollTop: 200,
    });

    //接受路由传参
    const router = useRouter();
    console.log(router.currentRoute._value.query);
    list.emid = router.currentRoute._value.query.id;
    list.wholeNum = Number(router.currentRoute._value.query.num);
    list.groupId = router.currentRoute._value.query.groupId;

    // 挂载数据
    onMounted(() => {
      // 详情数据
      getdetails(list.emid).then((data) => {
        list.reviewList = data.data[0].bookTop;
      });

      getmorecom(list.groupId, list.index).then((data) => {
        list.lists = data.data;
        console.log(list.lists, "评论总数");

        let praiseCoun = JSON.parse(localStorage.getItem("praise"));
        if (praiseCoun && praiseCoun.length) {
          for (let i = 0; i < list.lists.length; i++) {
            for (let j = 0; j < praiseCoun.length; j++) {
              if (list.lists[i].updateTime == praiseCoun[j].createTime) {
                list.lists[i].userInfo.authorFlag = 1;
              }
            }
          }
        }

        let pinlist = JSON.parse(localStorage.getItem("commens"));
        if (pinlist && pinlist.length) {
          for (let i = 0; i < list.lists.length; i++) {
            for (let j = 0; j < pinlist.length; j++) {
              if (list.lists[i].id == pinlist[j].emid) {
                list.lists[i].replyCount += 1;
              }
            }
          }
        }

        let pinNum = JSON.parse(localStorage.getItem("Allcommens"));
        if (pinNum) {
          console.log(pinNum, "存储的信息");
          pinNum.forEach((item) => {
            if (item.id == list.emid) {
              console.log(item);
              list.Allcommenslist.push(item);
              list.wholeNum += 1;
            } else {
              list.wholeNum;
            }
          });
        } else {
          list.Allcommenslist;
          list.wholeNum;
        }

        let ping = JSON.parse(localStorage.getItem("praise"));
        if (ping && ping) {
          for (let i = 0; i < list.lists.length; i++) {
            for (let j = 0; j < ping.length; j++) {
              if (list.lists[i].id == ping[j].id && list.emid == ping[j].emid) {
                list.lists[i].praiseCount += ping[j].praiseCount;
              } else {
                list.lists[i].praiseCount;
              }
            }
          }
        }
      });
    });

    // 登录Id名
    let bok = JSON.parse(localStorage.getItem("booklD"));
    list.Id = bok;
    // 点赞功能
    let praiseCountFun = (id) => {
      Toast.success("点赞成功");
      let index = list.lists.findIndex((item) => item.updateTime == id);
      console.log(list.lists[index]);
      if (list.lists[index].platform == 1) {
        list.lists[index].praiseCount -= 1;
        list.lists[index].platform = 0;
      } else if (list.lists[index].platform == 0) {
        list.lists[index].praiseCount += 1;
        list.lists[index].platform = 1;
      }
      // let Product = [];
      list.lists[index].emid = list.emid;
      let praiseCoun = JSON.parse(localStorage.getItem("praise"));
      if (praiseCoun) {
        praiseCoun.push(list.lists[index]);
        for (let i = 0; i < praiseCoun.length; i++) {
          for (let j = i + 1; j < praiseCoun.length; j++) {
            if (
              praiseCoun[i].id == praiseCoun[j].id &&
              praiseCoun[i].emid == praiseCoun[j].emid
            ) {
              praiseCoun[i].praiseCount = praiseCoun[j].praiseCount;
              praiseCoun.splice(j, 1);
            }
          }
        }

        localStorage.setItem("praise", JSON.stringify(praiseCoun));
      } else {
        localStorage.setItem("praise", JSON.stringify([list.lists[index]]));
      }
    };

    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    let submit = () => {
      if (list.Allcommens == "") {
        Toast.fail("请输入内容");
        return;
      } else {
        //获取当前时间并打印
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf =
          new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
        let ss =
          new Date().getSeconds() < 10
            ? "0" + new Date().getSeconds()
            : new Date().getSeconds();
        list.gettime =
          yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
        console.log(list.gettime,'时间');

        console.log(list.reviewList);
        let commen = [];
        commen.unshift({
          bookName: list.reviewList.bookName,
          authorPenName: list.reviewList.authorPenName,
          coverImg: list.reviewList.coverImg,
          id: list.emid,
          nickname: "熊猫书友" + list.Id,
          avatarUrl:
            "http://cdn.static.17k.com/user/avatar/08/28/06/73840628.jpg-88x88?v=1654241197000",
          text: list.Allcommens,
          vipLevel: "",
          time:list.gettime,
          givep: 0,
          reply: 0,
        });
        let Allcolist = JSON.parse(localStorage.getItem("Allcommens"));
        if (Allcolist && Allcolist.length) {
          Allcolist.push(commen[0]);
          localStorage.setItem("Allcommens", JSON.stringify(Allcolist));
        } else {
          localStorage.setItem("Allcommens", JSON.stringify(commen));
        }
        show.value = false;
        list.Allcommens = "";
        Toast.success('发布成功，等待审核通过');
      }
    };

    //过滤器
    let getFilter = (num) => {
      if (num < 10000) {
        return num;
      }
      let w = num > 10000 ? num / 10000 : num; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";
      return y;
    };

    // 信息
    let informationFun = (id) => {
      // console.log(id);
      id;
      console.log(list.lists[0], "454456");
      router.push("replies?id=" + id + "&groupId=" + list.lists[0].groupId);
    };

    // 排序
    let sortFun = () =>{
      list.flag = true
      Toast('切换成功')
      for (let i = 0; i < list.lists.length; i++) {
          for (let j = 0; j < list.lists.length - i - 1; j++) {
            if (
              list.lists[j].createTime >
              list.lists[j + 1].createTime
            ) {
              let num = list.lists[j];
              list.lists[j] = list.lists[j + 1];
              list.lists[j + 1] = num;
            }
          }
        }
    }



    const loading = ref(false);
    const finished = ref(false);

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 1; i++) {
        list.index += 1
        getmorecom(list.groupId, list.index).then((data) => {
          data.data.forEach(item =>{
            list.lists.push(item);

          })
        })
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.index >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

     // 回到顶部
    const backTop = () => {
      console.log(window, list.scrollTop, "top");

      let timer = setInterval(() => {
        let ispeed = Math.floor(-list.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          list.scrollTop + ispeed;
        if (list.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    };
       const scrollToTop = () => {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      list.scrollTop = scrollTop;
      if (list.scrollTop > 200) {
        list.btnFlag = true;
      } else {
        list.btnFlag = false;
      }
      // console.log(scrollTop, "top");
    };

    return {
      ...toRefs(list),
      showPopup,
      getFilter,
      sortFun,
      show,
      praiseCountFun,
      submit,
      informationFun,
       onLoad,
      loading,
      finished,
      scrollToTop,
      backTop,

    };
  },
    mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
};
</script>

<template>
  <div class="morecom">
    <div class="bac-top" v-if="btnFlag" @click="backTop"></div>

    <div class="top_navbar">
      <div class="back_l">
        <span
          @click="$router.go(-1)"
          class="iconfont icon-zuojiantou-copy"
        ></span>
      </div>
      <p>书籍评论区</p>
      <p></p>
    </div>
    <div class="nov_box" v-if="reviewList">
      <div class="nov_l">
        <img :src="reviewList.coverImg" alt="" />
      </div>
      <div class="nov_r">
        <p class="title">{{ reviewList.bookName }}</p>
        <div class="score">
          <span
            >{{ reviewList.authorPenName }}&nbsp;·&nbsp;{{
              reviewList.bookCategory.name
            }}&nbsp;·&nbsp;{{ reviewList.bookStatus.name }}</span
          >
        </div>
        <div class="score">
          <span>{{ getFilter(reviewList.wordCount) }}字</span>
        </div>
      </div>
    </div>
    <div class="sort">
      <div class="left">全部评论（ {{ wholeNum }} ）</div>
      <div class="right"><span :class="flag?'con':''" @click="sortFun"></span>
      <!-- <span class="con">综合</span> -->
      </div>
    </div>

    <!-- 自已的品论 -->
    <div class="comments" v-for="(item, index) in Allcommenslist" :key="index">
      <div class="user_box">
        <div class="avatar">
          <img :src="item.avatarUrl" alt="" />
        </div>
        <div class="name">
          <p>{{ item.nickname }}</p>
        </div>
      </div>
      <p class="write-p">{{ item.text }}</p>
      <div class="left">
        <!-- <p>2天前</p> -->
        <div class="right">
          <div class="num"></div>
          <div class="titel">
            <div
              :class="item.authorFlag == 1 ? 'con num' : 'num'"
              @click="praiseCountFun(item.praiseCount)"
            >
              <span class="iconfont icon-xiaoxi"></span>{{ item.reply }}
            </div>

            <div
              :class="item.authorFlag == 1 ? 'con num' : 'num'"
              @click="praiseCountFun(item.praiseCount)"
            >
              <span class="iconfont icon-dianzan"></span
              >{{ item.praiseCount == 1 ? item.givep : "赞" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 遍历品论 -->
    <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
    <div class="comments" v-for="(item, index) in lists" :key="index">
      <div class="user_box">
        <div class="avatar">
          <img :src="item.userInfo.avatarUrl" alt="" />
        </div>
        <div class="name">
          <p>{{ item.userInfo.nickname }}</p>
          <div v-show="item.userInfo">
            <span v-show="item.userInfo.vipLevel"
              >VIP{{ item.userInfo.vipLevel }}</span
            ><a v-if="item.userInfo.fansLevel !== -1"
              ><b>{{ item.userInfo.fansLevel }}</b>
              <li v-if="item.userInfo.vipLevel == 0">见习</li>
              <li v-if="item.userInfo.vipLevel == 1">学徒</li>
              <li v-if="item.userInfo.vipLevel == 2">弟子</li>
              <li v-if="item.userInfo.vipLevel == 3">执事</li>
              <li v-if="item.userInfo.vipLevel == 4" style="color: #7e5014">
                舵主
              </li>
            </a>
          </div>
        </div>
      </div>
      <p class="write-p">{{ item.summary }}</p>
      <div class="left">
        <!-- <p>2天前</p> -->
        <div class="right">
          <div class="num"></div>
          <div class="titel">
            <div class="num" @click="informationFun(item.id)">
              <span class="iconfont icon-xiaoxi"></span>{{ item.replyCount }}
            </div>
            <div
              :class="item.praiseCount == 1 ? 'con num' : 'num'"
              @click="praiseCountFun(item.updateTime)"
            >
              <span class="iconfont icon-dianzan"></span
              >{{ item.praiseCount == 1 ? item.praiseCount : "赞" }}
            </div>
          </div>
        </div>
      </div>
    </div>
</van-list>
    <div class="write_box">
      <div class="write" is-link @click="showPopup">写书评</div>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '9%' }"
      >
        <div style="display: flex; align-items: center">
          <input
            type="text"
            placeholder="说明你对该小说的看法..."
            autofocus
            v-model="Allcommens"
          />
          <p style="padding: 0 10px; color: #00c290" @click="submit">发布</p>
        </div>
      </van-popup>
    </div>
  </div>
</template>



<style lang="scss" scoped>
  .bac-top {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 37px;
    height: 37px;
    background: url("../assets/img/10068.png") no-repeat center;
    background-size: 37px 37px;
    z-index: 999;
  }
:deep {
  .van-popup {
    border-radius: 10px 10px 0 0;
    padding: 10px 16px;
    box-sizing: border-box;
  }
  .van-overlay {
    background: rgb(0 0 0 / 32%);
  }
}
.morecom {
  padding-bottom: 73px;
  background-color: #f8f9fa;
  .top_navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    border-bottom: 1px solid #665857;
    padding: 0 16px;
    color: #000;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .iconfont {
      font-size: 22px;
    }
  }

  .nov_box {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    background-color: #665857;
    margin-bottom: 10px;
    color: #eee;
    .nov_l {
      height: 82px;
      border-radius: 4px;
      overflow: hidden;
      img {
        height: 100%;
      }
    }
    .nov_r {
      margin-left: 18px;
      .title {
        font-weight: 600;
        margin-bottom: 5px;
      }
      .score {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        font-size: 12px;
        p {
          margin-left: 8px;
          font-size: 18px;
        }
      }
    }
  }
  .comments {
    padding: 12px 16px;
    margin-bottom: 10px;
    background-color: #fff;
    .user_box {
      display: flex;
      align-items: center;
      .avatar {
        //   width: 40px;
        height: 40px;
        img {
          height: 100%;
          border-radius: 50%;
        }
      }
      .name {
        margin-left: 10px;
        p {
          font-size: 13px;
          color: #77757f;
          margin-bottom: 5px;
        }
        div {
          display: flex;
          align-items: center;

          span {
            transform: scale(0.7);
            padding: 1.2px 4px;
            font-size: 6px;
            color: #7e5014;
            background-color: #f9d466;
            border-radius: 5px 0 5px 0;
          }
          a {
            transform: scale(0.8);
            border-radius: 5px 0 5px 0;
            overflow: hidden;
            font-size: 6px;
            color: #7e5014;
            background-color: #b4ccff;
            color: #5a78a8;
            padding-right: 4px;
            display: flex;
            b {
              padding: 1px 2px;
              font-size: 6px;
              font-weight: normal;
              margin-right: 2px;
              color: #fff;
              background-color: #87a1d2;
            }
          }
        }
      }
    }
    .write-p {
      padding: 10px 0 0;
      margin-bottom: 3px;
      font-size: 14px;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        font-size: 12px;
        color: #b6b4ba;
        font-weight: 300;
      }
      .right {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .num {
          display: flex;
          align-items: center;
          font-size: 11px;
          color: #b6b4ba;
        }
        .titel {
          display: flex;
          div {
            margin: 0 5px;
          }
          .con {
            color: #36c5a8;
          }
        }
        .iconfont {
          font-size: 17px;
          margin-right: 3px;
        }
        .iconfont:last-child {
          margin-left: 10px;
        }
      }
    }
  }

  .write_box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #fff;
    padding: 10px 0;
    input {
      padding: 10px;
      flex: 1;
      width: 92%;
      border: 1px solid #aaaaaa;
      font-size: 14px;
      border-radius: 5px;
    }
    .write {
      padding: 6px 0;
      color: #fff;
      background-color: #36c5a8;
      font-size: 17px;
      text-align: center;
      margin: 0 16px;
      border-radius: 6px;
      border: 1px solid #a5ddd5;
    }
  }
  .book_box {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 8px;
    .title {
      padding-top: 20px;
      padding: 0 8px;
      font-size: 15px;
      font-weight: 600;
      color: #37363c;
    }
    .book_item {
      display: flex;
      flex-wrap: wrap;
      .book {
        margin-top: 20px;
        padding: 0 8px;
        width: 20%;
        .book_img {
          height: 100px;
          border-radius: 3px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .book_title {
          // width: 25%;
          font-size: 13px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-top: 5px;
        }
        .author {
          margin-top: 5px;
          color: #9a999f;
          font-size: 10px;
        }
      }
    }
  }
  .sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 10px 12px;
    .right {
      font-size: 12px;
      span {
        padding: 0 10px;
        border-left: 1px solid #665857;
        &:nth-child(1) {
          border: none;
        }
      }
      .con {
        color: #36c5a8;
      }
    }
  }
}
</style>